<!-- 我的收藏 -->
<template>
  <div class="myCollection-page">
    <div class="theory-box">
      <div class="theory-box-l">
        <div class="answerSheet-box">
          <div class="answerSheet-box-name">答题卡</div>
          <div class="answerSheet-on">
            <div class="answerSheet-box-cont" v-if="answerList1.length > 0">
              <div class="theory-box-l-title">单选</div>
              <div class="answerSheet-box-cont-o">
                <div class="answerSheet-box-cont-o-item" :class="item.answer_state == 1 ? 'sure' : item.answer_state == 2 ? 'worn' : ''" v-for="(item, index) in answerList1" @click="handelClick(item)">
                  <div style="margin-top: 2px">{{ index + 1 }}</div>
                  <div>单</div>
                </div>
              </div>
            </div>
            <div class="answerSheet-box-cont" v-if="answerList2.length > 0">
              <div class="theory-box-l-title">多选</div>
              <div class="answerSheet-box-cont-o">
                <div class="answerSheet-box-cont-o-item" :class="item.answer_state == 1 ? 'sure' : item.answer_state == 2 ? 'worn' : ''" v-for="(item, index) in answerList2" @click="handelClick(item)">
                  <div style="margin-top: 2px">{{ index + 1 }}</div>
                  <div>多</div>
                </div>
              </div>
            </div>
            <div class="answerSheet-box-cont" v-if="answerList3.length > 0">
              <div class="theory-box-l-title">判断</div>
              <div class="answerSheet-box-cont-o">
                <div class="answerSheet-box-cont-o-item" :class="item.answer_state == 1 ? 'sure' : item.answer_state == 2 ? 'worn' : ''" v-for="(item, index) in answerList3" @click="handelClick(item)">
                  <div style="margin-top: 2px">{{ index + 1 }}</div>
                  <div>判</div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
      <div class="theory-box-r">
        <div class="chatScrollBox-cont" id="chatScrollBox" v-if="dataList.length > 0">
          <div class="examPractice-box" v-for="(item, index) in dataList">
            <div class="examPractice-box-t">
              <span class="box-t-title">{{index+1}}、【{{item.question.type_name}}】{{ item.question.title }}</span>
              <img src="@/assets/icon/star-active.png" alt="" @click="clickToBookmark(item)">
            </div>
            <div class="examPractice-box-c">
              <div class="box-c-exam">
                <div class="box-c-exam-item" v-for="(qitem, qindex) in item.question.option"  @click="slectAn(index, qindex)">
                  <div class="check-up" :class="{ checkActive: isSelect(item, item.answer, getIndex(qindex))}">
                    <div class="check-active-in"></div>
                  </div>
                  <div :class="{ active: isSelect(item, item.answer, getIndex(qindex))}">
                    <span class="">{{ getIndex(qindex) }}、</span>
                    <span>{{ qitem.content }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="examPractice-box-b">
              <div class="box-b-btn" @click="handelJx(item)">解 析</div>
              <div class="box-b-content" v-if="item.question.analysisShow">
                <div class="box-b-content-t">正确答案：{{ item.question.answer}}</div>
                <div class="box-b-content-b">解析︰<span v-html="item.question.analysis"></span></div>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import {favoriteTopic, getCollectionList, getSubmitAnswer, getSubmitTheTestPaper} from "@/api";
export default {
  name: "myCollection",
  components: {
  },
  data() {
    return {
      dataList: [],
      Qsindex: 0,
      paperId: 0,
      answerList1: [], // 单选
      answerList2: [], // 多选
      answerList3: [], // 判断
    }
  },
  mounted() {
    this.getCollectionList()
  },
  methods: {
    // 获取收藏列表
    getCollectionList() {
      let params = {
        page: 1,
        list_rows: 9999
      }
      getCollectionList(params).then(res => {
        if (res.code == 1) {

          let arr = res?.data?.list || []
          if (arr.length > 0) {
            this.answerList1 = []
            this.answerList2 = []
            this.answerList3 = []
            arr.forEach((item) => {
              item.question.analysisShow = false
              item.answer = ''
              if (item.question.question_type == 1) {
                this.answerList1.push(item)
              }
              if (item.question.question_type == 2) {
                this.answerList2.push(item)
              }
              if (item.question.question_type == 3) {
                this.answerList3.push(item)
              }
            })
          } else {
            this.answerList1 = []
            this.answerList2 = []
            this.answerList3 = []
          }
          this.dataList = arr
        }
      })
    },
    // 点击切换
    handelClick(info) {
      let index = this.dataList.findIndex(item => item.question_id == info.question_id)

      const childs = document.querySelectorAll(".examPractice-box");
      const scrollHeight = childs[index].offsetTop
      let div = document.getElementById("chatScrollBox");
      div.scrollTop = scrollHeight - 160
    },
    // 解析
    handelJx(item) {
      item.question.analysisShow = !item.question.analysisShow
    },
    // 选项字母
    getIndex(n) {
      return String.fromCharCode(n + 65)
    },

    isSelect(e, answer, answer2) {
      if (e.question.question_type == 2) {
        return answer.indexOf(answer2) != -1
      } else {
        return answer === answer2
      }
    },
    slectAn(index, n) {
      this.bIndex = index
      this.$emit('send', index);
      let item = this.dataList[index];
      if (item.question.question_type != 2) {
        item.answer = this.getIndex(n);
        // this.subAnser();
      } else {
        let arr = item.answer || [];
        let currentOptions = this.getIndex(n);
        if (typeof arr == 'string') {
          arr = item.answer.split(',');
        }
        let arrIndex = arr.indexOf(currentOptions);
        if (arrIndex > -1) {
          arr.splice(arrIndex, 1)
        } else {
          arr.push(this.getIndex(n))
        }
        item.answer = arr.join(",")
        // this.subAnser();
      }
    },
    // 点击每题答案提交
    subAnser() {
      let answer = this.dataList[this.bIndex].answer;
      if (!answer) {
        return
      }
      let id = this.dataList[this.bIndex].question_id;
      let params = {
        id: id,
        answer: answer
      }
      getSubmitAnswer(params).then(res => {
        if (res.code == 1) {
          if (res.data.is_submit) {
            this.submitClick()
          }
        }
      })
    },

    // 确认交卷
    submitClick() {
      let params = {record_id: this.recordId}
      getSubmitTheTestPaper(params).then(res => {
      })
    },
    // 点击是否收藏
    clickToBookmark(item) {
      let params = {
        paper_id: item.paper_id,
        question_id: item.question_id,
        paper_question_id: item.paper_question_id,
      }
      favoriteTopic(params).then(res => {
        if (res.code == 1) {
          this.getCollectionList()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.myCollection-page {
  width: 100%;
  height: 100%;
  .chatScrollBox-cont {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    font-family: PingFang SC, PingFang SC;
  }
  .active {
    color: #3582E5;
  }
  .check-up {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9F9F9F;
    margin-right: 10px;
  }
  .checkActive {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #9F9F9F;
    margin-right: 10px;
    .check-active-in {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin: 2px auto;
      background: #3582E5;
      border: 1px solid #3582E5;
    }
  }
}
</style>
